require(['./config'], () => {
    require(['template', 'header','footer'], (template) => {
        class order {
            constructor () {
                this.showData()
                this.allcheck()
                if (this.data) {
                    this.calcTotal()
                    this.checkChange()
                    this.allcheckclick()
                    this.delOrder()
                    this.choseNumchange()
                }
            }

            // 查看localstorage里面有没有数据, 如果有就渲染, 如果没有, 就显示提醒
            showData () {
                let data = localStorage.getItem('cart')
                if (data) {
                    this.data = JSON.parse(data)
                    $('.main-order').html(template('orderDataTemplate', { list: this.data }))
                } else {
                    $('.main-order').addClass('ac')
                    $('.elac-order').hide()
                    $('.noorder').removeClass('ac')
                }
            }

            // 计算总价
            // reduce接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
            // 计算到总价后return给total
            calcTotal () {
                const total = this.data.reduce((money, shop) => {
                    if (shop.check) {
                        money += shop.trueprice * shop.count
                    }
                    return money
                }, 0)
                $('#total').html(total)
            }

            // 勾选商品重新计算总价
            checkChange () {
                const _this = this
                $('.checks').on('change', function () {
                    // 获取到商品的id 场次id 价格id
                    const id = $(this).parents('.main-order-item').data('id')
                    const priceid = $(this).parents('.main-order-item').data('priceid')
                    const sessionid = $(this).parents('.main-order-item').data('sessionid')
                    
                    _this.data = _this.data.map(shop => {
                        if (((shop.id === id)&&(shop.sessionid === sessionid)&&(shop.priceid === priceid))) {
                            // prop可以查找到元素中不在DOM里显示的属性
                            shop.check = $(this).prop('checked')
                        }
                        // map方法需要return
                        return shop
                    })
                    // 重新存一次localstorage
                    localStorage.setItem('cart', JSON.stringify(_this.data))
                    // 重新计算价格
                    _this.calcTotal()
                    // 单选按钮改变了, 全选按钮的状态也要改变
                    _this.allcheck()
                })
            }

            // 全选按钮根据单选的情况改变
            allcheck () {
                $("#allcheck").prop('checked', this.data.every(shop => shop.check))
            }

            // 当点击全选按钮时, 单选按钮的状态要做出改变
            allcheckclick () {
                const _this = this
                $("#allcheck").on('change', () => {
                    const state = $("#allcheck").prop('checked')
                    this.data.every(shop => {
                        shop.check = state
                        return shop
                    })
                    $('.checks').prop('checked',state)
                    _this.calcTotal()
                })
            }

            // 删除订单
            delOrder () {
                const _this = this
                $(".item-content-cancel").on('click', function () {
                    // 获取到商品的id 场次id 价格id
                    const id = $(this).parents('.main-order-item').data('id')
                    const priceid = $(this).parents('.main-order-item').data('priceid')
                    const sessionid = $(this).parents('.main-order-item').data('sessionid')

                    // 在this.data中找到对应数据进行删除
                    // 然后重新存一次localstorage
                    _this.data = _this.data.filter(shop => {
                        if (((shop.id != id)||(shop.sessionid != sessionid)||(shop.priceid != priceid))){
                            return shop
                        }
                    })
                    if (_this.data.length == 0) {
                        localStorage.removeItem('cart')
                        _this.showData()
                    } else {
                        // 重新存一次localstorage
                        localStorage.setItem('cart', JSON.stringify(_this.data))
                    }
                    _this.calcTotal()
                    $(this).parents(".main-order-item").remove()
                    // location.reload(true)
                })
            }

            // 选择商品数量, 改变总计价格
            choseNumchange () {
                const _this = this
                $('.chosenum-cut').on('click', function () {
                    // 根据this找到按钮的父级进行操作
                    var a = $(this).parentsUntil('.main-order-item').children('.item-count').html()
                    a--
                    if (a < 1) {
                        a = 1
                        alert("购买票数不得少于1张")
                    }

                    // 获取到商品的id 场次id 价格id
                    const id = $(this).parents('.main-order-item').data('id')
                    const priceid = $(this).parents('.main-order-item').data('priceid')
                    const sessionid = $(this).parents('.main-order-item').data('sessionid')
                    
                    _this.data = _this.data.map(shop => {
                        if (((shop.id === id)&&(shop.sessionid === sessionid)&&(shop.priceid === priceid))) {
                            shop.count = a
                            $(this).parents('.main-order-item').find('.item-count').html(a)
                            $(this).parents('.main-order-item').find('.totalcount font').html(a * shop.trueprice)        
                        }
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.data))
                    _this.calcTotal()
                    // location.reload(true)
                })
                $('.chosenum-plus').on('click', function () {
                    var a = $(this).parentsUntil('.main-order-item').children('.item-count').html()
                    a++
                    if (a > 4) {
                        a = 4
                        alert("购买票数超过单笔订单购买限制4张")
                    }
                    // 获取到商品的id 场次id 价格id
                    const id = $(this).parents('.main-order-item').data('id')
                    const priceid = $(this).parents('.main-order-item').data('priceid')
                    const sessionid = $(this).parents('.main-order-item').data('sessionid')
                    
                    _this.data = _this.data.map(shop => {
                        if (((shop.id === id)&&(shop.sessionid === sessionid)&&(shop.priceid === priceid))) {
                            shop.count = a
                            $(this).parents('.main-order-item').find('.item-count').html(a)
                            $(this).parents('.main-order-item').find('.totalcount font').html(a * shop.trueprice)  
                        }
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.data))
                    _this.calcTotal()
                    // location.reload(true)
                })
            }
        }
        new order()
    })
})